<template>
	<view class="uni-container">
		<uni-forms ref="form" :model="formData" validateTrigger="bind" label-width="200">
			<uni-forms-item name="avatar" label="骑手头像">
				<view class="uploadfile" @click="updateFile('avatar')">
					<uni-icons v-if="loadingAavatar" type="image" color="#afafaf" size="50"></uni-icons>
					<image v-else :src="formData.avatar" mode="widthFix" style="width: 150px; height:150px ">
					</image>
				</view>
			</uni-forms-item>
			<uni-forms-item name="mobile" label="手机号码">
				<uni-easyinput v-model="formData.mobile"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="name" label="骑手姓名">
				<uni-easyinput v-model="formData.name"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="id_card" label="身份证号">
				<uni-easyinput v-model="formData.id_card"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="is_online" label="在线状态">
				<switch @change="binddata('is_online', $event.detail.value)" :checked="formData.is_online"></switch>
			</uni-forms-item>

			<uni-forms-item name="status" label="骑手状态">
				<switch @change="binddata('status', $event.detail.value)" :checked="formData.status"></switch>
			</uni-forms-item>

			<uni-forms-item name="area" label="配送区域">
				<uni-data-picker :localdata="area" popup-title="请选择区域" @change="onchangeArea"></uni-data-picker>
			</uni-forms-item>



			<uni-forms-item name="examine_status" label="审核状态">
				<uni-data-select v-model="formData.examine_status.value" :clear="false" :localdata="range"
					@change="change"></uni-data-select>
			</uni-forms-item>

			<uni-forms-item name="photo" label="手持证件">
				<view class="uploadfile" @click="updateFile('hand_id_card')">
					<uni-icons v-if="loading" type="image" color="#afafaf" size="50"></uni-icons>
					<view v-else style="width:110% ;">
						<image :src="formData.photo.hand_id_card" mode="widthFix" style="width:100%"></image>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="photo" label="健康证件">
				<view class="uploadfile" @click="updateFile('health_certificate')">
					<uni-icons v-if="loading" type="image" color="#afafaf" size="50"></uni-icons>
					<view v-else style="width:110% ;">
						<image :src="formData.photo.health_certificate" mode="widthFix" style="width:100%">
						</image>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="photo" label="身份证/正">
				<view class="uploadfile" @click="updateFile('id_card_zheng')">
					<uni-icons v-if="loading" type="image" color="#afafaf" size="50"></uni-icons>
					<view v-else style="width:110% ;">
						<image :src="formData.photo.id_card_zheng" mode="widthFix" style="width:100%"></image>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="photo" label="身份证/反">
				<view class="uploadfile" @click="updateFile('id_card_fan')">
					<uni-icons v-if="loading" type="image" color="#afafaf" size="50"></uni-icons>
					<view v-else style="width:110% ;">
						<image :src="formData.photo.id_card_fan" mode="widthFix" style="width:100%"></image>
					</view>
				</view>
			</uni-forms-item>
			<view class="uni-button-group">
				<button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
				<navigator open-type="navigateBack" style="margin-left: 15px;">
					<button class="uni-button" style="width: 100px;">返回</button>
				</navigator>
			</view>
		</uni-forms>
	</view>
</template>

<script>
import {
	validator
} from '@/js_sdk/validator/rider_users.js';

const db = uniCloud.database();
const dbCmd = db.command;
const dbCollectionName = 'rider_users';

function getValidator(fields) {
	let result = {}
	for (let key in validator) {
		if (fields.includes(key)) {
			result[key] = validator[key]
		}
	}
	return result
}
export default {
	data() {
		let formData = {
			"user_id": "",
			"mobile": "",
			"name": "",
			"avatar": "",
			"id_card": "",
			"area": null,
			"array_all": [],
			"is_online": true,
			"order_number": 0,
			"status": true,
			"order_total_number": 0,
			"money": 0,
			"create_date": null,
			"location": null,
			"examine_status": {
				value: 0
			},
			"photo": {
				hand_id_card: "",
				id_card_zheng: "",
				id_card_fan: "",
				health_certificate: ""
			}
		}
		return {
			range: [{
				value: 0,
				text: '审核中'
			}, {
				value: 1,
				text: '审核通过'
			}, {
				value: 2,
				text: '审核不通过'
			}],
			loadingAavatar: true,
			loading: true,
			formData,
			area: [],//配送区域
			formOptions: {},
			rules: {
				...getValidator(Object.keys(formData))
			}
		}
	},
	onReady() {
		this.$refs.form.setRules(this.rules)
	},
	created() {
		this.getArea();
	},
	methods: {
		//设置区域
		onchangeArea(e) {
			this.formData.area_all = e.detail.value;
			this.formData.area = e.detail.value[e.detail.value.length - 1];
		},
		//获取配送区域
		getArea() {
			db.collection('region_city').get().then(res => {
				this.area = res.result.data;
			});

		},
		/**
		 * 验证表单并提交
		 */
		submit() {
			uni.showLoading({
				mask: true
			})
			this.$refs.form.validate().then((res) => {
				return this.submitForm(res)
			}).catch(() => { }).finally(() => {
				uni.hideLoading()
			})
		},
		// 上传图片
		updateFile(photos) {
			let _this = this
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function (res) {
					uni.showLoading({ title: "上传中···" })
					let filePath = res.tempFilePaths[0]
					uniCloud.uploadFile({
						filePath: filePath,
						cloudPath: 'rider' + Date.now() + '.jpg',
						success: function (res) {
							uni.showToast({
								title: "上传完成"
							})
							if (photos !== 'avatar') {
								_this.formData.photo[photos] = res.fileID
								_this.loading = false
							} else {
								_this.formData.avatar = res.fileID
								_this.loadingAavatar = false
							}

						},
						fail: function () {
							uni.showToast({
								title: "上传失败"
							})
						}
					})
				}
			});
		},
		// 修改审核状态
		change(e) {
			console.log(e);
			this.formData.examine_status = this.range[e]
			console.log(this.formData);
		},
		/**
		 * 提交表单
		 */
		submitForm(value) {
			value.area_all = this.formData.area_all;
			// 使用 clientDB 提交数据
			return db.collection(dbCollectionName).add(value).then((res) => {
				uni.showToast({
					title: '新增成功'
				})
				this.getOpenerEventChannel().emit('refreshData')
				setTimeout(() => uni.navigateBack(), 500)
			}).catch((err) => {
				uni.showModal({
					content: err.message || '请求服务失败',
					showCancel: false
				})
			})
		}
	}
}
</script>
<style>
.uploadfile {
	width: 150px;
	height: 150px;
	border: 1px solid #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px 0;
}

.uploadfile:hover {
	background: #f9f9f9;
	cursor: pointer;
}
</style>